// Basic
.clearfix() {
  &:after {
    content: "";
    display: block;
    clear: both;
  }
}
// Grid
.rows(@breakpoint) {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-flex-basis: 100%;
    -ms-flex-basis: 100%;
    flex-basis: 100%;
    margin-bottom: 1rem;
    &.inside {
        margin: 0;
        padding: 0;
    }
    &.between {
        -webkit-justify-content: space-between;
        -ms-flex-pack: space-between;
        justify-content: space-between;
    }
    &.centered {
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
    &.around {
        -webkit-justify-content: space-around;
        -ms-flex-pack: distribute;
        justify-content: space-around;
    }
    &.vertical-center {
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
    }
    @media (max-width: @breakpoint) {
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        .full-width();

        &.between,
        &.centered,
        &.around,
        &.vertical-center {
            -webkit-flex-direction: row;
            -ms-flex-direction: row;
            flex-direction: row;
        }
    }
}
.full-width() {
    .width-1,
    .width-2,
    .width-3,
    .width-4,
    .width-5,
    .width-6,
    .width-7,
    .width-8,
    .width-9,
    .width-10,
    .width-11 {
        .col(12);
        margin-right: 0;
    }
}
.col(@num) {
    box-sizing: border-box;
    width: @num/@grid-columns*100%;
    margin-right: 1rem;
    &:last-child {
        margin-right: 0;
    }
}

.col-fixed(@width) {
    box-sizing: border-box;
    -webkit-flex: 0 0 @width;
    -ms-flex: 0 0 @width;
    flex: 0 0 @width;
    @media (max-width: @breakpoint-small) {
        -webkit-flex: 0;
        -ms-flex: 0;
        flex: 0;
        width: 100%;
    }
}

.offset(@num) {
    margin-left: @num/@grid-columns*100%;
    @media (max-width: @breakpoint-small) {
        margin-left: 0;
    }
}

// Blocks
.blocks() {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;

    & > div,
    & > p,
    & > h1,
    & > h2,
    & > h3,
    & > h4,
    & > h5,
    & > h6,
    & > section,
    & > aside,
    & > article {
        box-sizing: border-box;
        padding: 1rem;
    }
}